<template>
	<view class="recharge">
		<view class="list_warp">
			<scroll-view class="scroll-view_H" scroll-x="true" :scroll-left="listIndex == 5 ? '120' : '0'">
				<view :class="['listTxt', { listTxtActive: listIndex == index }]" v-for="(item, index) in list" :key="index" @click="onActive(index, item.typeTxt)">
					{{ item.name }}
				</view>
			</scroll-view>
		</view>
		<view v-if="listData.length == 0">
			<no-status :type="listIndex" text="暂无消费记录~"></no-status>
		</view>
		<view class="list_box" v-else>
			<view class="list_head flex" v-for="(item, index) in listData" :key="index">
				<view class="img-box">
					<image class="w100 h100" :src="item.shop.avatar_url" mode=""></image>
				</view>
				<view class="data-box">
					<view class="">
						<span>{{ item.shop.shopname }}</span>
						<text :class="{ redFont: item.status_text == '处理中' }">{{ item.status_text }}</text>
					</view>
					<view class="">
						<span>{{ get_dates(item.createtime) }}</span>
						<span>-{{ item.price }}</span>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			listIndex: 0,
			list: [
				{
					name: '全部'
				},
				{
					name: '处理中'
				},
				{
					name: '已使用'
				},
				{
					name: '已取消'
				},
				{
					name: '已退回'
				},
				{
					name: '已完成'
				}
			],
			page: 1,
			totalPage: 1,
			listData: []
		};
	},
	onLoad() {
		this.getRechargeList();
	},
	onReachBottom() {
		this.page++;
		this.getRechargeList();
	},
	methods: {
		getRechargeList() {
			let that = this;
			if (this.page > this.totalPage) return this.$wanlshop.msg('我是有底线的');
			uni.showLoading({
				title: '加载中'
			});
			this.$request({
				url: 'user/consume',
				method: 'POST',
				data: {
					status: this.listIndex
				}
			}).then((res) => {
				const { code, data, msg } = res.data;
				if (code == 1) {
					that.totalPage = data.last_page;
					that.listData = [...that.listData, ...data.data];
				} else {
					uni.showToast({
						title: msg,
						icon: 'error'
					});
				}
				uni.hideLoading();
			});
		},
		// 切换订单状态
		onActive(ind, txt) {
			this.listIndex = ind;
			this.page = 1;
			this.totalPage = 1;
			this.listData = [];
			this.getRechargeList();
		}
	}
};
</script>

<style scoped lang="scss">
.recharge {
	height: 100%;
	.list_box {
		margin-top: 20upx;
		padding: 0 32rpx;
		background-color: #fff;
		.list_head {
			width: 100%;
			border-bottom: 2upx solid #efefef;
			padding: 34upx 0;
			&:last-child {
				border: 0;
			}

			.img-box {
				width: 80rpx;
				height: 80rpx;
				flex-shrink: 0;
				border-radius: 8rpx;
				margin-right: 20rpx;
				background-color: #d9d9d9;
			}

			.data-box {
				width: 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				> view {
					display: flex;
					justify-content: space-between;
					width: 100%;
					&:first-child {
						span {
							font-size: 28rpx;
						}
					}
					&:last-child {
						span:first-child {
							font-size: 24rpx;
							line-height: 26rpx;
							color: #333;
						}
						span:last-child {
							font-size: 32rpx;
							line-height: 32rpx;
							color: #333;
							font-weight: 500;
						}
					}
				}
				text {
					font-size: 26rpx;
					color: #999;
				}
				.redFont {
					color: #ff3f4a;
				}
			}
		}
	}
}
.list_warp {
	width: 100%;
	// padding: 0 32rpx;
	background-color: #fff;
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	overflow: hidden;
	box-sizing: border-box;
	.scroll-view_H {
		width: 100%;
		white-space: nowrap;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.listTxt,
		.listTxtActive {
			width: 16.6%;
			height: 84rpx;
			font-size: 28rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			color: #666;
			display: inline-block;
			line-height: 84rpx;
			vertical-align: top;
			text-align: center;
		}
		.listTxtActive {
			position: relative;
			font-size: 32rpx;
			font-weight: bold;
			color: #000;
			z-index: 1;
			&::after {
				position: absolute;
				left: 50%;
				bottom: 0;
				content: '';
				width: 32rpx;
				height: 4rpx;
				transform: translate(-50%, 0);
				background-color: #ebbe87;
				z-index: 2;
			}
		}
	}
}
</style>
<style>
page {
	height: 100%;
	background: #f4f5f9;
}
</style>
